<template>
	<view class="page">
		<flowbefore :beflows="beflows" :status="status" :isBtnClick="isBtnClicks" @save="save" @submit="submit" :statusType="statusType">
			<template>
				<view class="padding-bottom-100">
					<form class="flowform">
						<view class="formlist inputtext">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>流程标题</label></view>
								<view class="controlvalue">
									<input type="text" v-model="payment.flowTitle" name="flowTitle" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>单号编号</label></view>
								<view class="controlvalue">
									<input type="text" v-model="payment.billNo" name="billNo" disabled="true" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" @tap="flowUrgent">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>紧急程度</label></view>
								<view class="controlvalue">
									<input type="text" v-model="payment.flowUrgent" name="flowUrgent" placeholder="选择" disabled="true" />
								</view>
								<view class="advanceicon iconfont icon-xiangyou"></view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>申请人员</label></view>
								<view class="controlvalue">
									<input type="text" v-model="payment.applyUser" name="applyUser" disabled="true" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>申请部门</label></view>
								<view class="controlvalue">
									<input type="text" v-model="payment.departmental" name="departmental" disabled="true" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext">
							<view class="formgroup">
								<view class="labletitle"><label>申请日期</label></view>
								<view class="controlvalue">
									<input type="text" v-model="payment.applyDate" name="applyDate" disabled="true" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext margin-top-20">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>付款单位</label></view>
								<view class="controlvalue">
									<input type="text" v-model="payment.paymentUnit" name="paymentUnit" placeholder="输入付款单位" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>用途名称</label></view>
								<view class="controlvalue">
									<input type="text" v-model="payment.purposeName" name="purposeName" placeholder="输入用途名称" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>项目类别</label></view>
								<view class="controlvalue">
									<input type="text" v-model="payment.projectCategory" name="projectCategory" placeholder="输入项目类别" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>项目负责人</label></view>
								<view class="controlvalue">
									<input type="text" v-model="payment.projectLeader" name="projectLeader" placeholder="输入负责人" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>开户银行</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="text" v-model="payment.openingBank" name="openingBank" placeholder="输入开户银行" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle"><label>收款人账号</label></view>
								<view class="controlvalue">
									<input type="text" v-model="payment.beneficiaryAccount" name="beneficiaryAccount" placeholder="输入收款人账号" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>联系方式</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="text" v-model="payment.receivableContact" name="receivableContact" placeholder="输入联系方式" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>申请金额</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="digit" v-model="payment.applyAmount" name="applyAmount" placeholder="输入申请金额" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist inputtext" @tap="settlementMethod">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>结算方式</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="text" v-model="payment.settlementMethod" name="settlementMethod" placeholder="选择" disabled="true" />
								</view>
								<view class="advanceicon iconfont icon-xiangyou"></view>
							</view>
						</view>
						<view class="formlist inputtext" @tap="paymentType">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>付款类型</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="text" v-model="payment.paymentType" name="paymentType" placeholder="选择" disabled="true" />
								</view>
								<view class="advanceicon iconfont icon-xiangyou"></view>
							</view>
						</view>
						<view class="formlist inputtext ">
							<view class="formgroup border-bottom-E3E3E5">
								<view class="labletitle">
									<label>付款金额</label>
									<text class="required">*</text>
								</view>
								<view class="controlvalue">
									<input type="digit" v-model="payment.amountPaid" name="amountPaid" placeholder="输入付款金额" :disabled="disabled" />
								</view>
							</view>
						</view>
						<view class="formlist margin-bottom-30">
							<view class="formgroup  padding-17">
								<view class="labletitletar"><label>备注</label></view>
								<view class="controlvalue  uni-textarea">
									<textarea v-model="payment.description" name="description" maxlength="500" :disabled="disabled" placeholder="输入" />
								</view>
							</view>
						</view>
					</form>
					<view class="height-100"></view>
				</view>
			</template>
		</flowbefore>
		<w-picker :mode="mode" :pickerList="pickerList" ref="picker" :isSearchShow="isSearchShow"></w-picker>
	</view>
</template>

<script>
	import jnpf from '@/common/js/jnpf.js'
	import helper from '@/common/js/helper.js'
	import graceChecker from '@/common/js/graceChecker.js'
	import wPicker from '@/components/w-picker/w-picker.vue'
	import flowbefore from '@/components/work/flow-before.vue'
	let formRule=[
			{name:"flowTitle",checkType:"notnull",checkRule:"",errorMsg:"输入标题"},
			{name:"flowUrgent", checkType : "notnull", checkRule:"",  errorMsg:"选择紧急程度"},
			{name:"settlementMethod", checkType : "notnull", checkRule:"",  errorMsg:"选择结算方式"},
			{name:"paymentType", checkType : "notnull", checkRule:"",  errorMsg:"选择付款类型"},
			{name:"openingBank", checkType : "notnull", checkRule:"",  errorMsg:"输入开户银行"},
			{name:"applyAmount", checkType : "money", checkRule:"",  errorMsg:"输入合格申金额"},
			{name:"amountPaid", checkType : "money", checkRule:"",  errorMsg:"输入合格付款金额"},
			{name:"receivableContact", checkType : "telPhone", checkRule:"",  errorMsg:"输入合格联系方式"},
		];
	export default {
		data() {
			return {
				mode:'',//底部弹窗分类
				isSearchShow:false,
				disabled:false,//启用
				status:'',//流程状态
				beflows:{
					operstate:"",
					processId:''
				},
				payment: {
					billNo: '',
					flowUrgent: '',
					flowTitle: jnpf.userInfo().realName+'的付款申请单',
					applyUser:jnpf.userInfo().realName+"/"+jnpf.userInfo().account,
					departmental:jnpf.userInfo().departmentName,
					applyDate:helper.toDate(new Date, 'yyyy-MM-dd'),
					paymentUnit:'',
					purposeName:'',
					projectCategory:'',
					projectLeader:'',
					openingBank:'',
					beneficiaryAccount:'',
					receivableContact:'',
					settlementMethod:'',
					applyAmount:'0',
					paymentType:'',
					amountPaid:'0',
					description:''
				},
				isBtnClicks:false,
				pickerList:[],
				urgentList:[{
					label: "普通",
					value:"1"
				},
				{
					label: "重要",
					value:"2"
				},
				{
					label: "紧急",
					value:"3"
				}],
				paymentMethodList:jnpf.dictionaryData('WFSettlementMethod'),
				paymentTypeList:[{
						label: "订金",
						value:"0"
					},
					{
						label: "首付",
						value:"1"
					},
					{
						label: "尾款",
						value:"2"
					},
					{
						label: "全额",
						value:"3"
					}
				],
				statusType:''
			}
		},
		onLoad(e) {
			/* 工作区进入状态 */
			let statusType = uni.getStorageSync("type")
			this.statusType = statusType
			/* 工作区进入状态 End*/
			let flowInfo= JSON.parse(e.flowInfo);
			this.beflows.operstate=flowInfo.operstate;
			if(flowInfo.operstate =='add'){
				this.payment.flowId=flowInfo.id;
				this.status = 0;
				this.payment.flowUrgent=helper.getSpinnerNew(this.urgentList,'1');
				helper.ajax({
					url: '/api/System/BillRule/BillNumber/WF_PaymentApplyNo',
					success: res => {
						this.payment.billNo=res.data.data;
					}
				});
			}
			if(flowInfo.operstate=='info'){
				this.disabled=flowInfo.disabled;
				this.beflows.processId=flowInfo.id;
				this.status=flowInfo.status;
				helper.ajax({
					url: '/api/WorkFlowForm/PaymentApply/' + flowInfo.id,
					success: res => {
						let _payment=res.data.data;
						this.payment = _payment;
						this.payment.flowUrgent=helper.getSpinnerNew(this.urgentList,_payment.flowUrgent);
						this.payment.settlementMethod=helper.getSpinnerNew(this.paymentMethodList,_payment.settlementMethod);
						this.payment.applyDate=helper.toDate(_payment.applyDate, 'yyyy-MM-dd');
					}
				});
			}
		},
		methods: {
			flowUrgent(e) {
				if(!this.disabled){
					this.pickerList = this.urgentList;
					this.mode="selector";
					this.$refs.picker.show();
					this.$eventHub.$off('popupmodality');
					this.$eventHub.$on('popupmodality', (data) => {
						this.payment.flowUrgent = data.result;
						this.$eventHub.$off('popupmodality');
					});
				}
			},
			settlementMethod(e){
				this.pickerList= this.paymentMethodList;
				if(!this.disabled){
					this.mode="selector";
					this.$refs.picker.show();
					this.$eventHub.$off('popupmodality');
					this.$eventHub.$on('popupmodality', (data) => {
						this.payment.settlementMethod = data.result;
						this.$eventHub.$off('popupmodality');
					});
				}
			},
			paymentType(e){
				this.pickerList=this.paymentTypeList;
				if(!this.disabled){
					this.mode="selector";
					this.$refs.picker.show();
					this.$eventHub.$off('popupmodality');
					this.$eventHub.$on('popupmodality', (data) => {
						this.payment.paymentType = data.result;
						this.$eventHub.$off('popupmodality');
					});
				}
			},
			submit(e){
				let formData=this.payment;
				if (!graceChecker.check(formData,formRule)) {
					helper.msg(graceChecker.error);
					return;
				}
				this.isBtnClicks=true;
				formData.flowUrgent=helper.setSpinnerNew(this.urgentList,formData.flowUrgent);
				formData.settlementMethod=helper.setSpinnerNew(this.paymentMethodList,formData.settlementMethod);
				formData.status = 0;
				let method = "POST";
				let url = "/api/WorkFlowForm/PaymentApply";
				if(formData.id){
					method = "PUT";
					url=url+"/"+formData.id
				}
				formData.applyDate = Date.parse(formData.applyDate);
				helper.ajax({
					url: url,
					method:method,
					contentType: "application/json",
					data:formData,
					success: res => {
						helper.msg(res.data.msg, 'success');
						if (this.beflows.operstate=='add') {
							uni.redirectTo({
								url: '../../operate/started/started',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						}else{
							uni.navigateBack();
						}
						this.isBtnClicks=false
					}
				});
			},
			save(e){
				let formData=this.payment;
				if (!graceChecker.check(formData,formRule)) {
					helper.msg(graceChecker.error);
					return;
				}
				this.isBtnClicks=true;
				formData.flowUrgent=helper.setSpinnerNew(this.urgentList,formData.flowUrgent);
				formData.settlementMethod=helper.setSpinnerNew(this.paymentMethodList,formData.settlementMethod);
				formData.status = 1;
				let method = "POST";
				let url = "/api/WorkFlowForm/PaymentApply";
				if(formData.id){
					method = "PUT";
					url=url+"/"+formData.id
				}
				formData.applyDate = Date.parse(formData.applyDate);
				helper.ajax({
					url: url,
					method:method,
					contentType: "application/json",
					data:formData,
					success: res => {
						helper.msg(res.data.msg, 'success');
						if (this.beflows.operstate=='add') {
							uni.redirectTo({
								url: '../../operate/started/started',
								success: res => {},
								fail: () => {},
								complete: () => {}
							});
						}else{
							uni.navigateBack();
						}
						this.isBtnClicks=false
					}
				});
			},
		},
		components: {
			wPicker,
			flowbefore,
		}
	}
</script>

<style>
	.required{
		color: red;
	}
</style>
